<template>
  <el-container>
    <el-aside width="270px" id="farm2-frame-left">
      <!--菜单menus-->
      <Frame_left></frame_left>
    </el-aside>
    <el-container id="farm2-frame-container">
      <el-header>
        <!-- 缓存标签页tabs-->
        <frame_tabs />
      </el-header>
      <el-main> <!--首页-->
        <router-view v-slot="{ Component }">
          <keep-alive :max="5" :include="cachedViews">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
      <el-footer>
        <!--权限信息foot-->
        <Frame_foot />
      </el-footer>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Frame_foot from '@/components/frame/frame_foot.vue';
import Frame_left from '@/components/frame/frame_left.vue';
import frame_tabs from '@/components/frame/frame_tabs.vue';

import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useFrameTabStore } from '@/store/useFrameTabStore';
import { computed } from 'vue';

const route = useRoute();
const frameTabStore = useFrameTabStore();
const cachedViews = computed(() => {
  return frameTabStore.$state.tabs.map((node) => node.name);
});
onMounted(() => {
  // 页面初次加载时执行逻辑
  const name = route.name as string || 'default-name';
  frameTabStore.addTab({
    path: route.path,
    title: route.meta.title as string,
    name: name,
    isCloase: true,
  });
});




//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
</script>
<style>
/* 样式可以根据需要添加 */
</style>
